// 现代 JavaScript 箭头函数
// 作者：AI助手
// 最后更新：2024年

/**
 * 箭头函数是 ES6 引入的一种新的函数语法
 * 特点：
 * 1. 更简洁的语法
 * 2. 不绑定自己的 this
 * 3. 不能用作构造函数
 * 4. 没有 arguments 对象
 */

// 1. 基本语法
// 1.1 传统函数
function add(a, b) {
    return a + b;
}

// 1.2 箭头函数
const addArrow = (a, b) => a + b;

console.log(add(1, 2));        // 3
console.log(addArrow(1, 2));   // 3

// 2. 箭头函数的各种形式
// 2.1 无参数
const sayHello = () => '你好！';

// 2.2 单个参数（可以省略括号）
const double = x => x * 2;

// 2.3 多条语句（需要使用花括号和return）
const calculate = (a, b) => {
    const sum = a + b;
    const product = a * b;
    return { sum, product };
};

// 2.4 返回对象字面量（需要用括号包裹）
const createPerson = (name, age) => ({ name, age });

// 3. this 绑定示例
const counter = {
    count: 0,
    // 传统方法
    incrementTraditional: function() {
        setTimeout(function() {
            this.count++;
            console.log(this.count); // NaN，因为this指向window
        }, 1000);
    },
    // 箭头函数
    incrementArrow: function() {
        setTimeout(() => {
            this.count++;
            console.log(this.count); // 正确的计数
        }, 1000);
    }
};

// 4. 实际应用示例
const users = [
    { name: '张三', age: 20 },
    { name: '李四', age: 25 },
    { name: '王五', age: 30 }
];

// 4.1 数组方法中使用箭头函数
const names = users.map(user => user.name);
const adults = users.filter(user => user.age >= 25);
const totalAge = users.reduce((sum, user) => sum + user.age, 0);

console.log('名字列表:', names);
console.log('成年人:', adults);
console.log('年龄总和:', totalAge);

// 4.2 链式调用示例
const getAdultNames = users => users
    .filter(user => user.age >= 25)
    .map(user => user.name)
    .join(', ');

console.log('成年人名单:', getAdultNames(users));

// 5. 高阶函数示例
const multiply = factor => number => number * factor;
const double2 = multiply(2);
const triple = multiply(3);

console.log(double2(5));  // 10
console.log(triple(5));   // 15

// 6. 事件处理示例
const button = {
    addEventListener: (event, callback) => {
        console.log(`模拟${event}事件触发`);
        callback({ target: { value: '点击事件' } });
    }
};

button.addEventListener('click', event => {
    console.log('按钮被点击了！');
    console.log('事件值:', event.target.value);
});

// 7. 最佳实践
// ✅ 推荐：简单的映射和转换
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(n => n * n);

// ✅ 推荐：简单的事件处理
const handleClick = () => console.log('点击处理');

// ❌ 不推荐：构造函数
// const Person = (name) => { this.name = name }; // 错误！

// ❌ 不推荐：需要使用arguments对象时
// const concatenateAll = () => {
//     return arguments.join(''); // 错误！
// }; 